<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>6.组件的应用</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        class Test {}
    </script>
    <script src="./components/FormGroup.js"></script>
    
    <style>
        form {
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <div id="root">
        <form-group />
    </div>

    <script>
        // 组件的命名
        // 1. 大驼峰 （在编写组件时请使用大驼峰）
        //      使用大驼峰命名的组件 在使用组件是 可以 时用小驼峰 大驼峰 烤串
        // 2. 小驼峰
        //      使用小驼峰命名的组件 在使用组件时 只能使用 小驼峰 烤串
        // 3. 烤串命名
        //      只能通过烤串来使用



        // 组件使用的注意点
        // 一. 在html中使用组件
        //      1. 不能使用驼峰命名 （因为会被浏览器转换为小写 vue模板识别不出 组件的名称）
        //      2. 只能使用烤串命名
        //      3. 必须写成双标签模式

        // 二. 在组件的template中使用
        //      1. 可以直接写成单标签 必须有/结束 <form-group />
        //      2. 可以直接写成大驼峰和小驼峰


        
        // 在模板中使用组件 可以利用prop（组件属性）给组件传递参数
        // 组件在props里自己接收
        // 在组件的属性中 传递的参数默认为字符串
        // 如果想传递其他的数据类型 使用v-bind来进行绑定变量

        

        const vm = new Vue({
            el: "#root",
            data: {
                t: new Test()
            },
            template: `
            <div class="app">
                <form>
                    <FormGroup 
                        label="账号" 
                        type="text" 
                        placeholder="请输入邮箱" 
                        :test="t"
                    />

                    <FormGroup 
                        label="密码" 
                        type="text" 
                        placeholder="请输入密码" 
                    />
                </form>
            </div>
            `
        })

    </script>
</body>
</html>